'use client'

import { useState } from 'react'
import Image from 'next/image'
import { ExternalLink } from 'lucide-react'

interface SafeImageProps {
  src?: string
  alt: string
  width: number
  height: number
  className?: string
  fallbackIcon?: React.ReactNode
  fallbackClassName?: string
}

export function SafeImage({
  src,
  alt,
  width,
  height,
  className = '',
  fallbackIcon,
  fallbackClassName = 'w-full h-full flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100'
}: SafeImageProps) {
  const [imageError, setImageError] = useState(false)

  if (!src || imageError) {
    return (
      <div className={fallbackClassName}>
        {fallbackIcon || <ExternalLink className="h-12 w-12 text-blue-400" />}
      </div>
    )
  }

  return (
    <Image
      src={src}
      alt={alt}
      width={width}
      height={height}
      className={className}
      onError={() => setImageError(true)}
      unoptimized={true}
    />
  )
}
